<script setup></script>

<template>
  <div class="bg-[#F1F6FE]">
    <div class="py-20 max-w-[1032px] mx-auto px-4 md:py-12 flex-row">
      <img
        alt="我们的 AI Detector 有何特别之处？"
        loading="lazy"
        width="48"
        height="48"
        decoding="async"
        data-nimg="1"
        class="mx-auto"
        src="@/assets/img/smiling-face.jpg"
        style="color: transparent"
        _mstalt="823082"
        _msthash="923"
      />
      <h2 class="text-center text-5xl font-bold pt-3 md:text-2xl" _msttexthash="70930990" _msthash="924">
        我们的 AI Detector 有何特别之处？
      </h2>
      <table
        class="bg-white mt-10 overflow-hidden text-[#536D8C] rounded-lg flex-1 shadow-card border-collapse border border-[#DBECEA] w-fit mx-auto lg:border-none md:mt-6 sm:max-w-full sm:w-full"
      >
        <tbody>
          <tr class="text-start rounded-lg">
            <th class="px-5 py-3 border-t text-start border-[#D8E6FD] md:pb-0 font-bold border-t-0" _msttexthash="6685783" _msthash="2669">
              ⚡️ 强大的 AI 检测技术
            </th>
            <td
              class="px-5 py-3 border-t border-s border-[#D8E6FD] md:pt-2 border-t-0 md:border-s-0 md:border-t-0"
              _msttexthash="27112566"
              _msthash="2670"
            >
              保证 98% 的准确率
            </td>
          </tr>
          <tr class="text-start rounded-lg">
            <th class="px-5 py-3 border-t text-start border-[#D8E6FD] md:pb-0 font-bold" _msttexthash="17418076" _msthash="2671">
              🤖 全面的 AI 检测器
            </th>
            <td
              class="px-5 py-3 border-t border-s border-[#D8E6FD] md:pt-2 md:border-s-0 md:border-t-0"
              _msttexthash="46805200"
              _msthash="2672"
            >
              识别来自任何 LLM 的 AI 内容
            </td>
          </tr>
          <tr class="text-start rounded-lg">
            <th class="px-5 py-3 border-t text-start border-[#D8E6FD] md:pb-0 font-bold" _msttexthash="40706445" _msthash="2673">
              📝 多种用例
            </th>
            <td
              class="px-5 py-3 border-t border-s border-[#D8E6FD] md:pt-2 md:border-s-0 md:border-t-0"
              _msttexthash="35802780"
              _msthash="2674"
            >
              任何行业的所有用户都可以访问
            </td>
          </tr>
          <tr class="text-start rounded-lg">
            <th class="px-5 py-3 border-t text-start border-[#D8E6FD] md:pb-0 font-bold" _msttexthash="27843803" _msthash="2675">
              🛠 一体化 AI 内容解决方案
            </th>
            <td
              class="px-5 py-3 border-t border-s border-[#D8E6FD] md:pt-2 md:border-s-0 md:border-t-0"
              _msttexthash="10719488"
              _msthash="2676"
            >
              提供 AI Detector 和 Humanizer
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style lang="less" scoped>
.bg-\[\#F1F6FE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(241 246 254 / var(--tw-bg-opacity, 1));
}
*,
:after,
:before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: rgb(var(--ux-color-border) / 1);
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.max-w-\[1032px\] {
  max-width: 1032px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
  height: auto;
}
.font-bold {
  font-weight: 700;
}
.text-5xl {
  font-size: 2.25rem;
  line-height: 3rem;
}
.text-center {
  text-align: center;
}
.pt-3 {
  padding-top: 0.75rem;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.border-\[\#DBECEA\] {
  --tw-border-opacity: 1;
  border-color: rgb(219 236 234 / var(--tw-border-opacity, 1));
}
.border {
  border-width: 1px;
}

.rounded-lg {
  border-radius: 0.5rem;
}
.overflow-hidden {
  overflow: hidden;
}
.border-collapse {
  border-collapse: collapse;
}
.flex-1 {
  flex: 1 1 0%;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.font-semibold {
  font-weight: 600;
}
.text-start {
  text-align: start;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.border-\[\#DBECEA\] {
  --tw-border-opacity: 1;
  border-color: rgb(219 236 234 / var(--tw-border-opacity, 1));
}
.border {
  border-width: 1px;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.border-\[\#DBECEA\] {
  --tw-border-opacity: 1;
  border-color: rgb(219 236 234 / var(--tw-border-opacity, 1));
}
.border {
  border-width: 1px;
}
.mt-10 {
  margin-top: 2.5rem;
}
.w-\[704px\] {
  width: 704px;
}
.table-fixed {
  table-layout: fixed;
}
.overflow-hidden {
  overflow: hidden;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.shadow-card3,
.shadow-card4 {
  --tw-shadow: 0px 5px 16px rgba(0, 80, 125, 0.08);
  --tw-shadow-colored: 0px 5px 16px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0px 5px 16px rgba(0, 80, 125, 0.08);
}
.shadow-card4 {
  --tw-shadow: 0px 5px 16px rgba(0, 80, 125, 0.08);
  --tw-shadow-colored: 0px 5px 16px var(--tw-shadow-color);
}

.text-start {
  text-align: start;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.border-t-0 {
  border-top-width: 0;
}
.border-\[\#D8E6FD\] {
  --tw-border-opacity: 1;
  border-color: rgb(216 230 253 / var(--tw-border-opacity, 1));
}
.px-5 {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}
.py-3 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.text-start {
  text-align: start;
}
.font-bold {
  font-weight: 700;
}
.border-s {
  border-inline-start-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-0 {
  border-top-width: 0;
}
.border-\[\#D8E6FD\] {
  --tw-border-opacity: 1;
  border-color: rgb(216 230 253 / var(--tw-border-opacity, 1));
}
.px-5 {
  padding-left: 2.8rem;
  padding-right: 2.8rem;
}
.py-3 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.shrink-0 {
  flex-shrink: 0;
}
.max-w-\[508px\] {
  max-width: 508px;
}
.hover\:bg-primary:hover {
  --ux-primary: 58 126 255;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ux-primary) / var(--tw-bg-opacity, 1));
}
</style>
